import React from 'react'

class App extends React.Component {

  state = {
    txt: '',//文本框内容
    count: 0,
    context: "我在武汉玩耍ing", //内容
    city: "武汉",
    checkBoxs: '',
  }
  // 文本框
  // txtChange=(e)=>{
  //   this.setState({
  //     txt: e.target.value
  //   })
  // }
  // contextChange=(e)=>{
  //   this.setState({
  //     context: e.target.value
  //   })
  // }
  // selectChange=(e)=>{
  //   this.setState({
  //     city: e.target.value
  //   })
  // }

  // sexChange=(e)=>{
  //   this.setState({
  //     checkBoxs: e.target.checked
  //   })
  // }
  handleChange = (e) => {
    //获取的是value还是checked
    const target = e.target;
    const value = target.type === "value" ? target.value:target.checked;
    //获取name
    const name = target.name;
    this.setState({
      [name]:value
    })
  }
  render() {
    return (
      <div>
        文本框： <input  name="txt"  type="text" value={this.state.txt} onChange={this.handleChange}/>
        <p>{this.state.txt}</p>
        <h2>内容：</h2>
        <textarea name="context" value={this.state.context} onChange={this.handleChange}></textarea>
        <p>{this.state.context}</p>
        <h2>选择：</h2>
        <select name="city" value={this.state.city} onChange={this.handleChange}>
          <option value="sh">上海</option>
          <option value="bg">北京</option>
          <option value="wh">武汉</option>
          <option value="sz">深圳</option>
        </select>
        <p>{this.state.city}</p>
        <h2>单选：</h2>
        <input name="checkBoxs" type="checkbox" checked={this.state.checkBoxs} onChange={this.handleChange} />男
        <p>{this.state.checkBoxs}</p>
      </div>
    )
  }
}



//导出
export default App